@extends('layouts.simple')

@section('title','登录')

@section('content')
    <!-- Page Content -->
    <div class="bg-image" style="background-image: url('{{asset("media/photos/photo0.jpg")}}');">
        <div class="hero-static bg-white-90">
            <div class="content">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-4">
                        <!-- Sign In Block -->
                        <div class="block block-themed block-fx-shadow mb-0">
                            <div class="block-header">
                                <h3 class="block-title text-center">{{config('site.website_title')}}后台管理系统</h3>
                            </div>
                            <div class="block-content">
                                <div class="p-sm-3 px-lg-4 py-lg-4">
                                    <div class="text-center">
                                        <img style="width: 128px;height: auto" src="{{asset('media/avatars/avatar0.jpg')}}">
                                        <p style="padding-top:15px;">欢迎，请登录！</p>
                                    </div>


                                    <!-- Sign In Form -->
                                    <!-- jQuery Validation (.js-validation-signin class is initialized in js/pages/op_auth_signin.min.js which was auto compiled from _es6/pages/op_auth_signin.js) -->
                                    <!-- For more info and examples you can check out https://github.com/jzaefferer/jquery-validation -->
                                    <form class="js-validation-signin" action="/login" method="POST">
                                        <div class="py-3">
                                            <div class="form-group">
                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <input type="text" class="form-control form-control-alt" id="username" name="username" value="{{ old('username') }}" placeholder="账号" required>
                                            </div>
                                            <div class="form-group">
                                                <input type="password" class="form-control form-control-alt" id="password" name="password" value="{{ old('password') }}" placeholder="密码" required>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input type="text" class="form-control form-control-alt" name="captcha" placeholder="验证码" aria-describedby="basic-addon2" maxlength="4" required>
                                                    <a href="javascript:void (0);"  class="input-group-addon" id="basic-addon2">
                                                        <img src="{{ captcha_src('flat') }}" id="captcha">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="login-remember" name="remember">
                                                    <label class="custom-control-label font-w400" for="login-remember">记住密码</label>
                                                </div>
                                            </div>
                                            @if (isset($errors) && count($errors) > 0)
                                                <div class="notice text-center">
                                                    <span class="text-danger text-center"><?=implode(', ', $errors->all())?></span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-block btn-primary">
                                                    登录
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <!-- END Sign In Form -->
                                </div>
                            </div>
                        </div>
                        <!-- END Sign In Block -->
                    </div>
                </div>
            </div>
            <div class="content content-full font-size-sm text-muted text-center">
                <strong>{{config('site.website_title')}}</strong> &copy; <span data-toggle="year-copy">2018</span>
            </div>
        </div>
    </div>
    <!-- END Page Content -->

@endsection

@section('js_after')
    <script>
        $(document).ready(function(){
            $('.notice').delay(5000).slideUp();

            $('#captcha').on('click',function(){
                $(this).attr('src','{{ url('captcha/flat') }}?'+ new Date().getTime())
            });
        });
    </script>
@endsection


